<template>
  <div class="addGroupContainer">
    <div class="search">
      <el-input placeholder="请输入群号"
                v-model="subGroupMsg.UG_GroupID"
                clearable
                size="mini"
                style="width:250px"
                @clear="showInfoVisble=false">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="getGroupInfo"></el-button>
      </el-input>
      <!-- 添加按钮 -->
      <el-button type="primary"
                 size="mini"
                 class="btnAdd el-icon-plus"
                 @click="addGroupDialog=true"></el-button>
    </div>

    <div class="showInfo"
         v-if="showInfoVisble">
      <!-- 头像的显示 -->
      <div class="groupImg">
        <img :src="groupInfo.ug_Icon"
             alt=""
             style="width:100px;height:100px">
      </div>

      <!-- 其它基本信息的显示 -->
      <div class="basicInfo">
        <div class="groupName">
          <span>群名:</span> <span>{{groupInfo.ug_Name}}</span>
        </div>
        <div class="groupID">
          <span>群账号:</span> <span>{{groupInfo.ug_ID}}</span>
        </div>
        <div class="createTime">
          <span>创建时间:</span> <span>{{groupInfo.ug_CreateTime}}</span>
        </div>
        <div class="groupName">
          <span>管理员账号:</span> <span>{{groupInfo.ug_AdminID}}</span>
        </div>
        <div class="groupName">
          <span>群介绍:</span> <span>{{groupInfo.ug_Intro}}</span>
        </div>
      </div>
    </div>

    <!-- 添加群组弹窗 -->
    <el-dialog title="选择分组并提交"
               :visible.sync="addGroupDialog"
               width="50%"
               :before-close="handleClose"
               append-to-body>
      <el-input placeholder="请输入您在本群中的昵称"
                v-model="subGroupMsg.UG_GroupNick"
                clearable
                size="mini"
                style="width:250px">
      </el-input>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addGroupDialog = false"
                   size="mini">取 消</el-button>
        <el-button type="primary"
                   @click="subAddGroupMsg"
                   size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddGroup',
  created () {
    this.$message.success('查询群')
  },
  data () {
    return {
      // 请求查询群组信息，群组的账号
      // 群组的信息
      groupInfo: {},
      // 显示信息的部分是否显示
      showInfoVisble: false,
      // 添加群组弹窗是否显示
      addGroupDialog: false,
      // 提交群组消息
      subGroupMsg: {
        // 用户ID
        UG_UserID: '',
        // 群ID
        UG_GroupID: '',
        // 群昵称
        UG_GroupNick: '',
        // 群的名称
        UG_GroupName: ''
      }
    }
  },
  methods: {
    // 得到群组的消息
    getGroupInfo () {
      this.$http.get('getGroupInfo', { params: { groupID: this.subGroupMsg.UG_GroupID } }).then((response) => {
        const res = response.data
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.groupInfo = res.data
        this.showInfoVisble = true
        return this.$message.success(res.msg)
      })
    },
    // 防止弹窗误关
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 提交此信息
    subAddGroupMsg () {
      this.subGroupMsg.UG_UserID = window.sessionStorage.getItem('selfInfo')
      this.subGroupMsg.UG_GroupName = this.groupInfo.ug_Name
      var qs = require('qs')
      this.$http.post('addGroupMsg', qs.stringify(this.subGroupMsg))
        .then((response) => {
          const res = response.data
          if (res.code !== 200) return this.$message.error(res.msg)
          else {
            this.addGroupDialog = false
            return this.$message.success(res.msg)
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.addGroupContainer {
  position: relative;

  .search {
    padding: 30px 250px;
    .btnAdd {
      margin-left: 20px;
    }
  }
  .showInfo {
    margin-left: 320px;
    margin-top: 50px;
    .groupImg {
      float: left;
    }

    .basicInfo {
      float: left;
      margin-left: 40px;
    }
  }
}
</style>
